<template>
<el-container>
    <el-header>
        <NavigationBar />
    </el-header>

    <el-main>
         <!-- 用户信息卡片，当 user 数据存在时显示 -->
        <el-card v-if="user" class="user-card">
            <el-form :model="user" ref="userForm" label-width="120px">
                <el-form-item label="姓名" prop="user_name">
                    <el-input v-model="user.user_name" />
                </el-form-item>
                <el-form-item label="性别" prop="gender">
                    <el-select v-model="user.gender" placeholder="请选择">
                    <el-option label="男" :value="0" />
                    <el-option label="女" :value="1" />
                    </el-select>
                </el-form-item>
                <el-form-item label="学号/工号" prop="studentOrWorkNumber">
                    <el-input v-model="user.studentOrWorkNumber" type="number" />
                </el-form-item>
                <el-form-item label="年龄" prop="age">
                    <el-input v-model="user.age" type="number" />
                </el-form-item>
                <el-form-item label="角色" prop="role">
                    <el-select v-model="user.role" placeholder="请选择">
                    <el-option label="学生" :value="0" />
                    <el-option label="教职工" :value="1" />
                    </el-select>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="user.password" type="password" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="updateUser">更新</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card v-else class="loading-card">
            <p>加载用户信息中...</p>
        </el-card>
    </el-main>
</el-container>
</template>
  

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import axios from '@/axios'
import { ElMessage } from 'element-plus';
import NavigationBar from '@/components/NavigationBar.vue';

const user = ref(null);
const userForm = ref(null);  // 表单
const route = useRoute();

/* 获取用户信息 */
const fetchUser = async () => {
  try {
    const userId = route.params.id;  // 从路由参数中获取用户 ID
    const response = await axios.get(`/api/user/getUserInfo/${userId}`); 
    user.value = response.data;
  } catch (error) {
    ElMessage.error('获取用户数据出错: ' + error.message);
  }
};

/* 更新用户信息 */
const updateUser = async () => {
  if (!user.value.user_name || !user.value.studentOrWorkNumber || !user.value.age || !user.value.password) {
    ElMessage.error('请填写完整用户信息!');
    return;
  }

  try {
    await axios.put(`/api/user/updateUserInfo/${user.value.user_ID}`, user.value); 
    ElMessage.success('用户信息更新成功!');
  } catch (error) {
    ElMessage.error('更新用户数据出错: ' + error.message);
  }
};

onMounted(fetchUser);
</script>

<style scoped>
.user-card {
  max-width: 500px;
  margin: 20px auto;
  padding: 20px;
}

.loading-card {
  max-width: 500px;
  margin: 20px auto;
  padding: 20px;
  text-align: center;
}
</style>  